<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bangdan.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min1.css"/>
		<link rel="icon" href="img/LHE/favicon.ico" />
		<script src="js/bootstrap.js"></script>
	</head>
	<body>
		<span id="back"><img src="img/LHE/backtop.png" alt="" /></span>
		<div id="headerNav">
			<ul>                        
				<li><span>分类榜单：</span></li>
				<li><a href="" style="color:#d36f16;">作品总榜</a></li>
				<li><a href="">平面</a></li>
				<li><a href="">UI</a></li>
				<li><a href="">网页</a></li>
				<li><a href="">插画 </a></li>
				<li><a href="">动漫</a></li>
				<li><a href="">摄影</a></li>
				<li><a href="">空间</a></li>
				<li><a href="">工业/产品</a></li>
				<li><a href="">三维</a></li>
				<li><a href="">影视</a></li>
				<li><a href="">手工艺</a></li>
				<li><a href="">纯艺术</a></li>
				<li><a href="">服装</a></li>
				<li><a href=""> 文章总榜</a></li>
			</ul>
		</div>
		<header>
			<img src="img/LHE/menu.png" class="menu"/>
			<div class="menus">
				<p class="li"><a href="index.html">首页</a><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>
				<p class="li"><a href="index5.html">发现</a></p>
					<p class="li1"><a href="">平面</a></p>
					<p class="li1"><a href="">UI</a></p>
					<p class="li1"><a href="">插画</a></p>
					<p class="li1"><a href="">动漫</a></p>
					<p class="li1"><a href="">摄影</a></p>
					<p class="li1"><a href="">空间</a></p>
					<p class="li1"><a href="">工业/产品</a></p>
					<p class="li1"><a href="">三维</a></p>
					<p class="li1"><a href="">手工艺</a></p>
					<p class="li1"><a href="">纯艺术</a></p>
					<p class="li1"><a href="">服装</a></p>
					<p class="li1"><a href="">其他</a></p>
					<p class="li1"><a href="">精选作品</a></p>
					<p class="li1"><a href="">精选文章</a></p>
					<p class="li1"><a href="">精选收藏</a></p>
				<p class="li"><a href="pzk1.html">同城</a></p>
				<p class="li"><a href="position.html">职位</a></p>
					<p class="lis"><a href="position.html">职位</a></p>
					<p class="lis"><a href="">公司</a></p>
					<p class="lis"><a href="">+发布职位</a></p>
				<p class="li"><a href="pzk2.html">活动</a></p>
					<p class="lis"><a href="">设计大赛</a></p>
					<p class="lis"><a href="">公司专题策划</a></p>
					<p class="lis"><a href="">线上活动</a></p>
					<p class="lis"><a href="">线下活动</a></p>
					<p class="lis"><a href="">需为吸引瓶</a></p>
				<p class="li"><a href="index3.html">正版素材</a></p>
					<p class="lis"><a href="index3.html">图片</a></p>
					<p class="lis"><a href="">视频</a></p>
					<p class="lis"><a href="index4.html">字体</a></p>
					<p class="lis"><a href="">音乐</a></p>
				<p class="li"><a href="course.html" target="_blank">课程</a></p>
					<p class="lis"><a href="">正在热销</a></p>
					<p class="lis"><a href="">口碑好课</a></p>
				<p class="li"><a href="">...</a></p>	
					<p class="lis"><a href="榜单.html">榜单</a></p>
					<p class="lis"><a href="设计师.html">设计师</a></p>
					<p class="lis"><a href="站酷APP.html">站酷APP</a></p>
					<p class="lis"><a href="字体库.html">站酷字体</a></p>
			</div>
			<img src="img/LHE/logo.svg" class="pull-left logo"/>
			<nav class="pull-left">
				<ul class="nav pull-left clearfix">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="index5.html">发现</a>
						<div class="fx">
							<div class="top">
								<div><a href="">平面</a><span>|</span></div>	
								<div><a href="">UI</a><span>|</span></div>	
								<div><a href="">网页</a><span>|</span></div>	
								<div><a href="">插画</a><span>|</span></div>	
								<div><a href="">动漫</a><span>|</span></div>	
								<div><a href="">摄影</a><span>|</span></div>	
								<div><a href="">空间</a><span>|</span></div>	
								<div><a href="">工业/产品</a><span>|</span></div>	
								<div><a href="">三维</a><span>|</span></div>	
								<div><a href="">影视</a><span>|</span></div>	
								<div><a href="">手工艺</a><span>|</span></div>	
								<div><a href="">纯艺术</a><span>|</span></div>	
								<div><a href="">服装</a><span>|</span></div>	
								<div><a href="">其他</a><span>|</span></div>	
											
							</div>
							<hr/>
							<div class="bottom">
								<a href="">精选作品&nbsp;></a>
								<a href="">精选文章&nbsp;></a>
								<a href="">精选收藏&nbsp;></a>
							</div>
						</div>
					
					</li>
					<li><a href="pzk1.html">同城</a></li>
					<li>
						<a href="position.html">职位</a>
						<div class="zw">
							<p><a href="">职位</a></p>
							<p><a href="">公司</a></p>
							<p><a href="">+发布职位</a></p>
						</div>
					</li>
					<li>
						<a href="pzk2.html">活动</a>
						<div class="zw">
							<p><a href="">设计大赛</a></p>
							<p><a href="">公司专题策划</a></p>
							<p><a href="">线上活动</a></p>
							<p><a href="">线下活动</a></p>
							<p><a href="">学习音频</a></p>
						</div>
					</li>
					<li>
						<a href="index3.html">正版素材</a>
						<div class="zw">
							<p><a href="index3.html">图片</a></p>	
							<p><a href="">视频</a></p>
							<p><a href="index4.html">字体</a></p>
							<p><a href="">音乐</a></p>
						</div>
					</li>
					<li>
						<a href="course.html" target="_blank">课程</a>
						<div class="zw">
							<p><a href="">正在热销</a></p>
							<p><a href="">口碑好课</a></p>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="zw">
							<p><a href="榜单.html">榜单</a></p>
							<p><a href="设计师.html">设计师</a></p>
							<p><a href="站酷APP.html">站酷APP</a></p>
							<p><a href="字体库.html">站酷字库</a></p>
						</div>
					</li>
				</ul>
			</nav>
			
			<div class="log">
				<a href=""></a>
			</div>
			<div class="log">
				<a href=""></a>
			</div>
			<span><a href="">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="">注册</a></span>
			<div class="search">
				<div class="search_top">
					<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<input type="text" name="" id="" />
					<img src="img/LHE/seach.svg"/>
				</div>
					<div class="search_bot">
						<div class="search1">热门搜索</div>
						<div class="search2">2019毕业展</div>
						<div class="search2">青春答卷2018</div>
						<div class="search2">2018毕业展</div>
						<div class="search2">青春答卷2018</div>
						<div class="search2">我是毕业生</div>
					</div>
			</div>
		</header>
		<div class="pic">
			<img src="img/LHE/orange.jpg"/>
		</div>
		<div class="body">
			<section>
				<nav>
					<p class="nav_p1">当前榜单周期 <span><b>125</b></span></p>
					<p class="nav_p2">作品榜单</p>
					<p style="border-left: 3px solid #ffe300;" class="point" >总榜</p>
					<p class="point">平面</p>
					<p class="point">UI</p>
					<p class="point">网页</p>
					<p class="point">插画</p>
					<p class="point">动漫</p>
					<p class="point">摄影</p>
					<p class="point">空间</p>
					<p class="nav_p3">更多分类</p>
					<p class="nav_p4">文章榜单</p>
					<p class="point">总榜</p>
					<p class="nav_p5">站酷榜单规则说明</p>
					<p class="nav_p6">站酷会根据每周全站作品的数据情况，按照每项数据所占权重分别计算得分，采用百分制算法，对总得分数进行排名。
				    	其中，使用的数据包括但不仅包括阅读、推荐、收藏、分享、站酷编辑的推荐级别。更新时间：每周二11:00。<br /><br />特别声明!!<br /><br />
				    	站酷秉承公正公开原则，坚决抵制刷榜行为，刷榜行为包括但不仅包括使用程序、号召团队或个人专为刷榜目的而产生的数据。
				    	一旦发现刷榜行为，站酷将永久取消该作品上榜资格，涉及2次以上刷榜行为的设计师将永久取消上榜资格。
					</p>
				</nav>
				<div class="head">
					<span class="head_s1">作品总榜</span>
					<span class="head_s2">每周二11:00更新</span>
					<div class="head_nav">
						<span class="head_s3">第125期</span>
						<span class="head_s4">2019-07-22~2019-07-28  <img src="img/LHE/arrow.png"/></span>
						<div class="choose">
							<ul>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
								<li><span>第125期</span><p>2019-07-22~2019-07-28 </p></li>
							</ul>
						</div>
					</div>
				</div>
				<aside>
					<ul id="works">
						<li>
							<div class="rank">
								<p class="rank_num">1</p>
								<p class="rank_score">分数</p>
								<p class="rank_goal">98</p>
							</div>
							<img src="img/LHE/num_1.jpg" alt=""/  id="photo">
							<div class="author" id="author_pic">
								<a href="" class="works_name">2019 &nbsp;上半年总结</a>
								<span class="pic_class">插画</span>
								<img src="img/LHE/author_pic1.jpg"/>
								<a href="" class="author_name">LAUghing</a>
								<span class="data">2019/07/22</span>
							</div>
							<div class="check">
								<span>查看详情<img src="img/LHE/arrow.png" alt="" /></span>
							</div>
						</li>
						<div class="details" >
							<div class="times">
								<span>上周数据详情</span><span>上周排名</span><h class="h_1">丨</h><span>本周排名</span><h class="h_2">丨</h><span>上榜周期</span>
								<p class="times_p1">未上榜</p><p class="times_p2">1</p><p class="times_p3">1</p>
							</div>
							<div class="secondtimes">
								<span>人&nbsp;&nbsp;气</span><h>丨</h> <span>推荐次数</span><h class="h_1">丨</h><span>收藏次数</span><h class="h_2">丨</h><span>评论次数</span>
								<p class="secondtimes_p1">30865</p><p class="secondtimes_p2">1640</p><p class="secondtimes_p3">1035</p><p class="secondtimes_p4">127</p>
							</div>
						</div>
					</ul>
				</aside>
			</section>
		</div>
		<footer>
			<div class="footer1">
					<div class="footer_wrap container">
						<div class="footer_wrap1">         
							<a href=""><span><img src="img/LHE/app.svg"/></span><img src="img/LHE/ewm.png"/>移动版</a>
							<a href="">关于我们</a>
							<a href="">加入站酷</a>
							<a href="">用户协议</a>
							<a href="">隐私政策</a>
							<a href="">侵权申诉</a>
							<a href="">企业服务</a>
							<a href="">帮助中心</a>
							<a href="">联系我们</a>
							<a href="">中文</a>
							<a href="">English</a>
						</div>
						<div class="footer_wrap2">
							<a href=""><img src="img/LHE/ewm2.jpg"/></a>
							<a href=""></a>
						</div>
					</div>
					<div class="footer_tap container">						     
						<p>
						<a href="">京ICP备11017824号-4</a>
						<span>|</span>
						<a href="">京ICP证130164号</a>
						<span>|</span>
						<a href="">京公网安备11010502000501号</a>
						<span>|</span>
						<a href=""> 网络文化经营许可证 京网文[2016]6173-844号</a>
						<span>|</span>
						<a href="">广播电视节目制作经营许可证（京）字第06990号</a>
						</p>
						<p>
						<a href="">营业执照</a>
						<span>|</span>
						<a href="">网上有害信息举报专区</a>
						<span>|</span>
						<a href="">不良信息举报电话：010-56538658</a>
						<span>|</span>
						<a href=""> 举报邮箱 jubao@zcool.com.cn</a>
						<span>|</span>
						<a href="">联系电话：010-56538600</a>
						<span>|</span>
						<a href="">Copyright © 2006-2019 ZCOOL站酷</a>
						</p>
					</div>
				</div>
		</footer>
		<script type="text/javascript">
			//搜索图标点击出现搜索框
			$('.log:first').click(function(e){
					e.preventDefault();
					$('.search').fadeIn(1000);					
//					$(this).fadeOut(1000);
					$(".search input").click(function(e){
						 $(".search").fadeIn(1000);
						 e.stopPropagation();
	    			});
	    			$(window).click(function(e){
				        $(".search").fadeOut(1000);
					});
				});
				$(".log:first").click(function(e){
       				 e.stopPropagation();
    });
				//menus隐藏菜单栏	
				$('.menu').click(function(){
					$('.menus').addClass('menu1')
					
				});
				$('.menus .li button').click(function(){
					$('.menus').removeClass('menu1')
					
				})
			var li_rank_num=['2','3','4','5','6','7','8','9','10'];//作品排名
			var li_rank_goal=['97','96','95','94','93','93','92','91','90'];//作品得分
			var li_works_name=['2019 &nbsp;上半年总结','2019节气合集（上）-360搜索','逃避型人才【十一】',
							'2019 &nbsp;上半年总结','2019节气合集（上）-360搜索','逃避型人才【十一】',
							'2019 &nbsp;上半年总结','2019节气合集（上）-360搜索','逃避型人才【十一】']//作品名称
			var li_author_name=['渣男1号','渣男2号','渣男3号','渣男4号','渣男5号','渣男6号','渣男7号','渣男8号','渣男9号'];//作者名称
			var li_data=['2019/07/23','2019/07/24','2019/07/25','2019/07/26','2019/07/27','2019/07/28','2019/07/29','2019/07/30','2019/07/31'];//日期
			var li_num_img=['img/LHE/num_2.jpg','img/LHE/num_3.jpg','img/LHE/num_4.jpg',
							'img/LHE/num_2.jpg','img/LHE/num_3.jpg','img/LHE/num_4.jpg',
							'img/LHE/num_2.jpg','img/LHE/num_3.jpg','img/LHE/num_4.jpg'];//作品图片
			var li_author_img=['img/LHE/author_pic2.jpg','img/LHE/author_pic3.jpg','img/LHE/author_pic4.jpg',
								'img/LHE/author_pic2.jpg','img/LHE/author_pic3.jpg','img/LHE/author_pic4.jpg',
								'img/LHE/author_pic2.jpg','img/LHE/author_pic3.jpg','img/LHE/author_pic4.jpg'];//作者图片
			var lwr=['榜2','榜3','榜4','榜2','榜3','榜4','榜2','榜3','榜4'];//上周排名
			var wr=['1','1','1','1','1','1','1','1','1'];//本周排名
			var lcycle=['1','1','1','1','1','1','1','1','1'];//上榜周期
			var popular=['30865','30800','20865','30865','30800','20865','30865','30800','20865']//人气
			var recommend=['1300','1400','1500','1300','1400','1500','1300','1400','1500']//推荐次数
			var collect=['1600','1700','1800','1600','1700','1800','1600','1700','1800']//收藏次数
			var discuss=['200','250','300','200','250','300','200','250','300']//评论次数
			var i=0;
			for(var j=0;j<li_num_img.length;j++){
				var li_clone=$('#works li:first-child').clone(true);
				var details_clone=$('#works .details:first').clone(true);
				li_clone.children('.rank').children('.rank_num').html(li_rank_num[j]);//作品排名
				li_clone.children('.rank').children('.rank_goal').html(li_rank_goal[j]);//作品得分
				li_clone.children('.author').children('.works_name').html(li_works_name[j]);//作品名称
				li_clone.children('.author').children('.author_name').html(li_author_name[j]);//作者名称
				li_clone.children('.author').children('.data').html(li_data[j]);//日期
				li_clone.children('#photo').attr('src',li_num_img[j]);//作品图片
				li_clone.children('#author_pic').children('img').attr('src',li_author_img[j]);//作者图片
				details_clone.children().children('.times_p1').html(lwr[j]);//上周排名
				details_clone.children().children('.times_p2').html(wr[j]);//本周排名
				details_clone.children().children('.times_p3').html(lcycle[j]);//上榜周期
				details_clone.children().children('.secondtimes_p1').html(popular[j]);//人气
				details_clone.children().children('.secondtimes_p2').html(recommend[j]);//推荐次数
				details_clone.children().children('.secondtimes_p3').html(collect[j]);//收藏次数
				details_clone.children().children('.secondtimes_p4').html(discuss[j]);//评论次数
				$('#works').append(li_clone);
				$('#works').append(details_clone);
			}
			$('.check').attr('index',0);
			$('.check').click(function(){
				var indexs=$(this).attr('index');
				$(this).attr('index',++indexs);
				if(indexs%2==1){
					$(this).children('span').html('收起详情<img/LHE/>');
					$(this).children('span').children('img').attr('src','img/LHE/arrow2.png');
				
				}else{
					$(this).children('span').html('查看详情<img/LHE/>');
					$(this).children('span').children('img').attr('src','img/LHE/arrow.png');
				}
				$(this).parent().next().toggle(1000);
			})
			$('#back').hover(function(){
				$('#back').children('img').attr('src','img/LHE/backtop2.png');
			},function(){
				$('#back').children('img').attr('src','img/LHE/backtop.png');
			})
			$('#back').click(function(){
						$("html,body").animate({scrollTop:0},1000);
					})
			$(window).scroll(function(){
				var k=$(window).scrollTop();
				if(k>=545){
					$('#back').css('display','block');
				}else{
					$('#back').css('display','none');
				}
				if(k>=1400){
					$('#headerNav').slideDown(500);
				}else{
					$('#headerNav').slideUp(500);
				}
//				console.log($(window).scrollTop());//545;1636;
			})
		</script>
	</body>
</html>
